<template>
  <div class="app-container">
    <div class="filter-container" style="position: relative">
      <el-date-picker
        v-model="listQuery.checktime"
        type="daterange"
        range-separator="至"
        class="filter-item"
        style="width:300px"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>

      <el-select v-model="listQuery.self" class="filter-item w-200" placeholder="查看范围" clearable>
        <el-option
          v-for="(item,idx) in ['查看所有人','只看自己']"
          :key="idx"
          :label="item"
          :value="idx"
        >
        </el-option>
      </el-select>

      <el-select v-model="listQuery.imgType" class="filter-item w-200" placeholder="类型" clearable>
        <el-option
          v-for="(item,idx) in typeList"
          :key="idx"
          :label="item.name"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-button-group class="filter-item">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="searchSc(1)"
        >
          搜索
        </el-button>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-refresh"
          @click="refresh"
        >
          重置
        </el-button>
        <el-pagination
          layout="prev, pager, next"
          background
          v-if="sclist.total>0"
          style="position: absolute;right:0;"
          :page-size="14"
          :page-sizes="[14]"
          @current-change="gopage"
          :total="sclist.total"
        >
        </el-pagination>
      </el-button-group>

    </div>
    <div class="scimgBox"  v-loading="loading">
      <div v-if="sclist.total>0" style="display: flex;flex-wrap: wrap;min-height: 300px;">
        <div class="img" v-for="(item,idx) in sclist.data">
          <el-image
            :src="item.imgPath"
            style="width: 200px;height:300px;"
            fit="cover"
            :preview-src-list="srcList"
          >
          </el-image>
          <div class="action">
            <div class="a-row">
              <el-button type="primary" icon="el-icon-edit" circle size="mini" style="margin-right: 15px"
                         v-if="item.type!=2"
                         @click="editSC(item.id)"
              ></el-button>
              <el-popconfirm
                :title="(item.makeUserName!=name?'该素材是'+item.makeUserName+'所有，确认删除？':'确认删除这个素材吗？')"
                @confirm="delSucai(item.id)"
              >
                <el-button type="danger" icon="el-icon-delete" size="mini" circle slot="reference"></el-button>
              </el-popconfirm>
            </div>
          </div>
          <div class="imgTips">
            <div class="strong">{{ item.imgText }}</div>
            <div>制作:{{ item.makeUserName }}</div>
            <div>制作时间:{{ item.dateline }}</div>
          </div>
        </div>

      </div>
      <el-empty description="无数据" v-else style="margin:0 auto"></el-empty>
    </div>
  </div>
</template>
<style lang="less" scoped>
.filter-container {
  padding: 0 20px;
}

.scimgBox {
  height: calc(100% - 60px);
  overflow: auto;

  .img {
    border: 1px solid #ddd;
    padding: 5px;
    margin: 10px;
    position: relative;
    height: 400px;
    width: 210px;

    .action {
      position: absolute;
      background: rgba(0, 0, 0, .5);
      height: 40px;
      width: 100%;
      top: 0;
      left: 0;
      padding: 0 15px;

      .a-row {
        justify-content: right;
        height: 40px;
        display: flex;
        align-items: center;
      }
    }

    &:hover {
      border-color: #409EFF;
      cursor: pointer;
    }
  }

  .insertIMg {
    position: absolute;
    bottom: 80px;
    right: 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    padding: 7px 10px;
    color: #fff;

    &:hover {
      background: rgba(0, 0, 0, 1);
    }
  }

  .imgTips {
    font-size: 12px;
    color: #777;

    & > div {
      margin: 5px 0;

      &.strong {
        font-size: 16px;
        color: #409EFF;
        font-weight: bolder;
      }
    }
  }
}
</style>
<script>
import { mapGetters } from 'vuex'
import { DeleteSucai, searchSCK } from '@/api/count'

export default {
  data() {
    return {
      loading: true,
      sclist: [],
      srcList:[],
      typeList: [
        { name: 'banner', value: 'banner' },
        { name: '留言', value: 'liuyan' },
        { name: '领域', value: 'lingyu' },
        { name: '领域详情', value: 'lingyu2' },
        { name: '关键词', value: 'guanjianci' },
        { name: '省直', value: 'shengzhi' },
        { name: '市州', value: 'shizhou' },
        { name: '县市州', value: 'xianshi' },
        { name: '案例', value: 'anli' },
        { name: '感谢', value: 'ganxie' },
        { name: '日报图', value: 'ribao' }
      ],
      listQuery: {
        checktime: [new Date(new Date().getFullYear(), new Date().getMonth(), 1).toLocaleDateString('fr-CA'), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0, 23, 59, 59).toLocaleDateString('fr-CA')],
        self: 1,
        title: '',
        title2: '',
        imgType: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  watch: {
    'sucai.self': function(val) {
      this.searchSc(0)
    }
  },
  created() {
    this.searchSc(1)
  },
  methods: {
    gopage(page){
      this.searchSc(page)
    },
    refresh() {
      this.listQuery = {
        checktime: [],
        self: 0,
        title: '',
        title2: '',
        imgType: ''
      }
    },
    editSC(id) {
      this.$router.push({ path: '/report/monthcalendardiy', query: { id: id } })
      // window.location.href='#/report/monthcalendardiy?id='+id
    },
    delSucai(id) {
      DeleteSucai({ id: id }).then(r => {
        this.searchSc(0)
      })
    },
    openSc() {
      this.useImgdraw = true
    },
    newSC() {
      window.open('https://wz.mala.cn/admincp/#/report/monthcalendardiy')
    },
    searchSc(page) {
      this.loading = true
      searchSCK({page:page,...this.listQuery}).then(r => {
        this.loading = false
        if (r.code == 200) {
          this.sclist = r.data
          let srcList = []
          for (let i = 0; i < r.data.data.length; i++) {
            srcList.push(r.data.data[i].imgPath)
          }
          this.srcList = srcList
        }
      })
    }
  }
}
</script>
